<template>
  <view>
    <!-- Search搜索框区域 -->
    <view class="search-box">
      <uni-search-bar placeholder="请输入内容" bgColor="#EEEEEE" :radius="100" @input="input" cancelButton="none" :focus="true"></uni-search-bar>
    </view>
    <!-- 搜索结果列表区域 -->
    <view class="search-result">
      <view class="search-result-item" v-for="(item,index) in searchResult" :key="index"
        @click="gotoGoodsDetail(item.goods_id)">
        <text class="text-content">{{item.goods_name}}</text>
        <uni-icons type="right" size="18"></uni-icons>
      </view>
    </view>
    <!-- 搜索历史区域 -->
    <view class="history-box" v-show="kw.trim()===''">
      <view class="history-head">
        <text>搜索历史</text>
        <uni-icons type="trash-filled" size="22" @click="open"></uni-icons>

      </view>
      <view class="history-con">
        <view class="content-item" v-for="(item,index) in histories" :key="index">
          <text class="con-text" @click="gotoGoodsList(item)">{{item}}</text>
          <uni-icons type="close" size="24" @click.stop="clearHisItem(index)"></uni-icons>
        </view>
      </view>
    </view>
    <!-- 提示窗示例 -->
    <uni-popup ref="alertDialog" type="dialog">
      <uni-popup-dialog cancelText="关闭" confirmText="同意"  content="你确认清空搜索历史吗!"
        @confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
    </uni-popup>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        timer: null,
        kw: '',
        // 搜索建议
        searchResult: [],
        // 搜索历史
        searchHistory: [],
      };
    },
    onLoad() {
      //从storage中加载数据
      this.searchHistory = JSON.parse(uni.getStorageSync('kw') || '[]');
    },
    methods: {
      input(e) {
        clearTimeout(this.timer)
        this.timer = setTimeout(() => {
          // console.log(e);
          this.kw = e;
          this.getSearchResult();
          // 保存搜索关键词为历史记录
          this.saveSearchHis();

        }, 500)
      },
      async getSearchResult() {
        if (this.kw.trim() === '') {
          this.searchResult = [];
          return
        }
        const {
          data: res
        } = await uni.$http.get('/api/public/v1/goods/qsearch?query=' + this.kw);
        if (res.meta.status !== 200) return uni.$showToast
        this.searchResult = res.message;
      },
      gotoGoodsList(kw) {
        uni.navigateTo({
          url: '/subpkg/goods_list/goods_list?query=' + kw
        })
      },
      gotoGoodsDetail(id){
        uni.navigateTo({
          url:'/subpkg/goods_detail/goods_detail?goods_id='+id
        })
      },
      clearHisItem(index) {
        console.log(index);
        this.searchHistory.splice(index, 1)
      },
      // 保存搜索关键词为历史记录
      saveSearchHis() {
        if (this.kw.trim() !== '') {
          // this.searchHistory.push(this.kw);
          //搜索关键词去重操作
          const set = new Set(this.searchHistory);
          set.delete(this.kw);
          set.add(this.kw);
          this.searchHistory = Array.from(set);
          // 将搜索记录持久化
          uni.setStorageSync('kw', JSON.stringify(this.searchHistory));
        }
      },
      open() {
        this.$refs.alertDialog.open()
      },
      dialogClose() {
        this.$refs.alertDialog.close()
      },
      dialogConfirm() {
        this.searchHistory=[],
        uni.setStorageSync('kw','[]')
        this.$refs.alertDialog.close()
      }
    },
    computed: {
      histories() {
        return [...this.searchHistory].reverse()
      }
    }
  }
</script>

<style lang="scss">
  .search-box {
    background-color: #C00000;
  }

  .search-result {
    padding: 0 5px;
    font-size: 13px;

    .search-result-item {
      display: flex;
      padding: 12px 0;
      border-bottom: 1px solid #efefef;
      justify-content: space-between;
      align-items: center;

      .text-content {
        white-space: nowrap; //确保文本不会自动换行。
        overflow: hidden; //确保了内容超出容器大小时会被裁剪。
        text-overflow: ellipsis; // 用于设置当文本溢出时，使用省略号替代。
      }
    }
  }

  .history-box {
    padding: 0 10px;

    .history-head {
      display: flex;
      justify-content: space-between;
      padding: 10px 0;
      border-bottom: 1px solid #ccc;
    }

    .history-con {
      margin-top: 10px;
      display: flex;
      // justify-content: space-around;
      flex-wrap: wrap;

      .content-item {
        margin-right: 10px;
        margin-bottom: 10px;
        background-color: #efefef;
        display: flex;
        align-items: center;

        .con-text {
          padding: 15px 10px 15px
        }
      }
    }
  }
</style>